<div class="sim">
  <nz-spin
    nzSimple
    *ngIf="serviceCommon.sliceMax === 0"
    class="position-center"
  />

  <div
    class="wallpaper"
    *ngIf="serviceCommon.settings.simThemeImages.length > 0"
    [class.bootstrap]="serviceCommon.settings.simThemeHeight < 260"
  >
    <app-swiper
      [images]="serviceCommon.settings.simThemeImages"
      [autoplay]="serviceCommon.settings.simThemeAutoplay"
      [height]="serviceCommon.settings.simThemeHeight"
    />
    <div class="bar">
      <h1 class="title dark-white">
        {{ serviceCommon.settings.simTitle || serviceCommon.settings.title }}
      </h1>
      <pre
        class="description dark-white"
        [innerHTML]="description | safeHtml"
      ></pre>
      <app-search-engine />
    </div>
  </div>

  <app-search-engine class="hidden search-sm" />

  <nav class="top-nav dark-border-color dark-scrollbar dark-bg">
    <span
      *ngFor="
        let item of serviceCommon.websiteList.slice(0, serviceCommon.overIndex);
        let i = index;
        trackBy: serviceCommon.trackByItem
      "
      [class.active]="serviceCommon.page === i"
      [class.dark-text-active]="serviceCommon.page === i"
      class="over-item dark-text"
      (click)="serviceCommon.handleCilckTopNav(i)"
    >
      {{ item.title }}
    </span>
    <!-- More -->
    <app-web-more-menu
      *ngIf="serviceCommon.overIndex < serviceCommon.websiteList.length"
      [data]="serviceCommon.websiteList.slice(serviceCommon.overIndex, 99999)"
      [index]="serviceCommon.overIndex"
      [page]="serviceCommon.page"
      (onClick)="serviceCommon.handleCilckTopNav($event)"
    />
  </nav>

  <div class="wrapper">
    <nav
      class="sidebar dark-bg"
      id="sidebar"
      *ngIf="serviceCommon.websiteList[serviceCommon.page]?.nav?.length"
    >
      <div
        *ngFor="
          let item of serviceCommon.websiteList[serviceCommon.page].nav;
          let i = index;
          trackBy: serviceCommon.trackByItem
        "
        (click)="serviceCommon.handleSidebarNav(i)"
        [class.active]="serviceCommon.id === i"
        [class.dark-item-active]="serviceCommon.id === i"
        class="ripple-btn dark-text dark-hover"
      >
        {{ item.title }}
      </div>
    </nav>

    <aside class="site-box dark-bg">
      <div *ngIf="serviceCommon.currentList.length > 0; else noData">
        <div
          *ngFor="
            let item of serviceCommon.currentList.slice(
              0,
              serviceCommon.sliceMax
            );
            let i = index;
            trackBy: serviceCommon.trackByItem
          "
        >
          <div class="nav-wrapper">
            <app-toolbar-title
              [dataSource]="item"
              (onCollapse)="serviceCommon.onCollapse(item, i)"
              [index]="i"
            ></app-toolbar-title>

            <div
              nz-row
              [nzGutter]="[16, 16]"
              [style.display]="item.collapsed ? 'none' : ''"
            >
              <div
                class="gutter-row"
                nz-col
                [nzSpan]="8"
                [nzSm]="12"
                [nzMd]="12"
                [nzLg]="8"
                [nzXs]="24"
                *ngFor="
                  let el of item.nav;
                  index as j;
                  trackBy: serviceCommon.trackByItemWeb
                "
              >
                <app-card
                  [cardStyle]="serviceCommon.settings.simCardStyle"
                  [dataSource]="el"
                  [indexs]="[serviceCommon.page, serviceCommon.id, i, j]"
                  [searchKeyword]="serviceCommon.searchKeyword"
                  class="column-border"
                ></app-card>
              </div>
            </div>
          </div>
        </div>
      </div>

      <ng-template #noData>
        <app-no-data></app-no-data>
      </ng-template>
    </aside>
  </div>
</div>

<app-footer
  className="sim-footer"
  [content]="serviceCommon.settings.simFooterHTML"
></app-footer>
<app-fixbar
  (onCollapse)="serviceCommon.onCollapseAll()"
  [collapsed]="serviceCommon.collapsed"
>
</app-fixbar>

<div class="sim-bg dark-bg"></div>
